<template>
  <el-dialog v-dialogDrag :visible.sync="dialogVisible" :title="title" width="750px" @close="resetForm('ruleForm')">
    <button-group ref="buttonGroup" @submitForm="submitForm('ruleForm')" @cancel="dialogVisible = false" />
    <div class="formTopFont">物料BOM信息</div>
    <el-row>
      <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="auto">
        <el-form-item label="物料" prop="materialId">
          <el-select v-model="ruleForm.materialId" :disabled="this.title === '编辑'" style="width: 100%" filterable>
            <el-option v-for="item in materialList" :key="item.id" :label="`${item.materialName} ${item.unit ? '【' + item.unit + '】' : ''}`" :value="item.id">
              <span style="float: left">{{ item.materialName }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.unit }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="版本" prop="bomVersion">
          <el-input v-model="ruleForm.bomVersion" maxlength="20" show-word-limit />
        </el-form-item>
        <el-form-item label="工序" prop="procedureId">
          <el-select style="width: 100%" v-model="ruleForm.procedureId" filterable>
            <el-option v-for="item in procedureAll" :key="item.id" :value="item.id" :label="`${item.procedureName} ${item.factoryName ? '【' + item.factoryName + '】' : ''}`"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="ruleForm.remark" type="textarea" rows="3" maxlength="500" show-word-limit />
        </el-form-item>
      </el-form>
    </el-row>
  </el-dialog>
</template>
<script>
export default {
  props: {
    procedureAll: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    const checkName = async (rule, value, callback) => {
      if (this.ruleForm.materialId) {
        const res = await this.$axios.get(
          `/pro/bom/verifyVersionUnique?bomVersion=${value}&id=${
            this.ruleForm.id || ''
          }&materialId=${this.ruleForm.materialId}`
        )
        if (res?.data.code === 200) {
          return res.data.data ? callback() : new Error(callback('版本重复！'))
        } else {
          return new Error(callback(res.data.msg))
        }
      }
    }
    return {
      title: '',
      ruleForm: {
        materialId: '',
        bomVersion: '',
        procedureId: '',
        remark: ''
      },
      rules: {
        materialId: [
          { required: true, message: '物料不能不能为空！', trigger: 'change' }
        ],
        bomVersion: [
          { required: true, message: '版本号不能为空！', trigger: 'blur' },
          { validator: checkName, trigger: 'blur' }
        ],
        procedureId: [
          { required: true, message: '工序不能不能为空！', trigger: 'change' }
        ]
      },
      dialogVisible: false,
      materialList: []
    }
  },
  watch: {},
  mounted() {},
  methods: {
    /**
     * @description: 新增编辑
     * @param {*} row
     * @return {*}
     */
    async showDialog(row) {
      this.dialogVisible = true
      this.getAllMaterial(row?.id || '')
      if (row && row.hasOwnProperty('id')) {
        this.title = '编辑'
        this.ruleForm = Object.assign({}, row)
      } else {
        this.title = '新增'
      }
    },

    /**
     * @description: 获取所有物料
     * @return {*}
     */
    async getAllMaterial(id) {
      if (this.materialList.length < 1) {
        const res = await this.$axios.post(`/material/info/list`, {
          size: 999,
          current: 1
        })
        if (res.data.code === 200) {
          this.materialList = res.data.data.list
        }
      }
    },
    /**
     * @description: 表单提交
     * @param {*} formName
     * @return {*}
     */
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let method = 'post'
          if (this.ruleForm.id) method = 'put'
          const res = await this.$axios[method]('/pro/bom', this.ruleForm)
          if (res?.data.code === 200) {
            this.$notify.success('提交成功！')
            this.dialogVisible = false
            this.$emit('getTableInfo')
          } else {
            this.$notify.error(res.data.msg)
          }
        }
      })
    },
    /**
     * @description: 重置表单
     * @param {*} formName
     * @return {*}
     */
    resetForm(formName) {
      this.$refs[formName].resetFields()
      this.ruleForm = {
        materialId: '',
        bomVersion: '',
        remarks: ''
      }
    }
  }
}
</script>
<style lang='scss' scoped>
</style>
